<template>
  <div class="group-container">
    <div class="sku-list">
      <span class="sku-list__label">规格值：</span>
      <div class="sku-list__body">
        <div class="sku-item" v-for="(item, index) in sku.leaf" :key="index">
          <div>
            <el-tag
              slot="reference"
              size="small"
              effect="plain"
              closable
              @close="handleRemoveSkuLeaf(index)"
              >{{ item[optionText] }}</el-tag
            >
          </div>
          <div v-if="hasSkuImage" class="sku-item__upload">
            <div class="arrow"></div>
            <div class="upload-img">
              <el-upload
                class="img-uploader"
                :http-request="
                  ({ file }) => handleImgUploadFile(file, item[optionValue])
                "
                :show-file-list="false"
              >
                <el-image
                  v-if="item.imgUrl"
                  :src="item.imgUrl"
                  fit="contain"
                ></el-image>
                <i v-else class="el-icon-upload uploader-icon"></i>
              </el-upload>
              <!-- <el-upload
                :action="ease.action"
                :headers="ease.headers"
                :accept="ease.accept"
                :name="ease.uploadName"
                class="img-uploader"
                :show-file-list="false"
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      item[optionValue]
                    )
                "
              >
                <el-image v-if="item.imgUrl" :src="item.imgUrl"></el-image>
                <i v-else class="el-icon-upload uploader-icon"></i>
              </el-upload>-->
            </div>
          </div>
        </div>
        <div class="sku-item" v-if="sku[optionValue] > 0">
          <el-popover
            placement="bottom"
            width="200"
            trigger="click"
            v-model="visiable"
          >
            <el-select
              class="popover-select"
              size="mini"
              v-model="leafValue"
              multiple
              filterable
              allow-create
              placeholder="规格值"
              @change="createSkuLeaf"
              @visible-change="status => !status && this.handleSelectSku()"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in skuOptions"
                :key="item[optionValue]"
                :label="item[optionText]"
                :value="item[optionValue]"
              >
              </el-option>
            </el-select>
            <!-- <div style="text-align: right; margin: 10px 0 0">
              <el-button size="mini" type="text" @click="handleHideVisiable"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="handleSelectSku"
                >确定</el-button
              >
            </div>-->
            <el-tag slot="reference" size="small" class="cursor"
              ><i class="el-icon-circle-plus"></i
            ></el-tag>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Popover, Tag, Image, Upload, Button, Select } from "element-ui";
import {
  getUploadItemMediaToken,
  uploadFileToAliOss
} from "@/api/admin-api/FileApi";
import { updateSpecProp } from "@/api/admin-api/SpecApi";

Vue.use(Popover);
Vue.use(Tag);
Vue.use(Image);
Vue.use(Upload);
Vue.use(Button);
Vue.use(Select);

const noop = res => res;

export default {
  inject: ["ease"],

  data() {
    return {
      visiable: false,
      leafValue: [],
      skuOptions: [],
      id: 0
    };
  },

  props: {
    sku: {
      type: Object,
      default() {
        return {};
      }
    },
    hasSkuImage: {
      type: Boolean,
      default: false
    },
    onSkuLeafChange: {
      type: Function,
      default: noop
    }
  },

  computed: {
    optionValue() {
      return this.ease.optionValue;
    },

    optionText() {
      return this.ease.optionText;
    }
  },

  watch: {
    sku: {
      deep: true,
      immediate: true,
      handler(sku) {
        this.fetchLeafById(sku[this.optionValue]);
      }
    }
  },

  methods: {
    handleHideVisiable() {
      this.visiable = false;
    },

    handleResetLeafValue() {
      this.leafValue = [];
    },

    fetchLeafById(id) {
      if (!id) return;

      this.ease.onFetchSku(id).then(skuOptions => {
        this.id = id;
        this.skuOptions = skuOptions;
      });
    },

    handleRemoveSkuLeaf(index) {
      let { sku } = this;
      sku.leaf.splice(index, 1);

      this.onSkuLeafChange(sku.leaf);
    },

    handleRemoveImage(id) {
      let { sku, optionValue } = this;
      sku.leaf.forEach(item => {
        if (item[optionValue] === id) {
          item.imgUrl = "";
        }
      });

      this.onSkuLeafChange(sku.leaf);
    },

    createSkuLeaf(data) {
      let { sku, optionValue, skuOptions } = this;
      data = data.filter(item => {
        if (skuOptions.length === 0) {
          return true;
        } else {
          return !skuOptions.some(option => {
            return item === option[optionValue];
          });
        }
      });
      // 过滤需要新增的规格值,此处有bug
      if (!data.length) return;
      this.ease
        .onCreateSku({
          data: data,
          id: sku[optionValue]
        })
        .then(options => {
          skuOptions.push(...options);
          this.$nextTick(() => {
            const values = options.map(item => item.id);
            this.leafValue.push(...values);
            //新增加的选项value 为字符串，不是id,这里去除
            this.leafValue = this.leafValue.filter(item => {
              return skuOptions.some(option => {
                return item === option[optionValue];
              });
            });
          });
        });
    },

    handleSelectSku() {
      let { sku, hasSkuImage, optionValue, skuOptions, leafValue } = this;

      let skuLeaf = skuOptions.filter(
        item => leafValue.indexOf(item[optionValue]) >= 0
      );
      skuLeaf.map(item => {
        item.is_show = hasSkuImage;
      });

      let skuLeafIds = sku.leaf.map(item => item[optionValue]);
      skuLeaf.forEach(item => {
        if (skuLeafIds.indexOf(item[optionValue]) < 0) {
          sku.leaf.push(item);
        }
      });

      this.handleResetLeafValue();
      this.handleHideVisiable();
      this.onSkuLeafChange(sku.leaf);
    },
    handleImgUploadFile(file, id) {
      console.log("file", file, "id", id);
      let { sku, optionValue } = this;
      getUploadItemMediaToken().then(uploadToken => {
        // 上传文件
        const formData = new FormData();
        const fileKey = uploadToken.dir.concat(file.name);
        console.log("fileKey", fileKey);
        formData.append("key", fileKey);
        formData.append("policy", uploadToken.policy);
        formData.append("OSSAccessKeyId", uploadToken.ossAccessKeyId);
        formData.append("success_action_status", "200");
        formData.append("signature", uploadToken.signature);
        formData.append("file", file);
        // 上传至阿里云oss
        this.$loading();
        console.log("上传地址", uploadToken.fileHost);
        uploadFileToAliOss(uploadToken.fileHost, formData)
          .then(() => {
            const fileImg = "https://asset.fanghaowu.com/" + fileKey;
            sku.leaf.forEach(item => {
              if (item[optionValue] === id) {
                item.imgUrl = fileImg;
                updateSpecProp(item).then(() => {
                  console.log("图片上传完毕", item);
                });
              }
            });
            this.onSkuLeafChange(sku.leaf);
            this.$loading().close();
          })
          .catch(() => {
            this.$loading().close();
          });
      });
    },
    handleUploadSuccess(response, file, fileList, id) {
      let { sku, optionValue } = this;

      sku.leaf.forEach(item => {
        if (item[optionValue] === id) {
          item.imgUrl = response.imgUrl;
        }
      });

      this.onSkuLeafChange(sku.leaf);
    }
  },

  created() {
    let { sku, optionValue } = this;

    sku[optionValue] && this.fetchLeafById(sku[optionValue]);
  }
};
</script>

<style lang="scss">
.group-container {
  padding: 10px 10px 0;
  color: #666;
  font-size: 12px;

  .sku-list {
    display: flex;
    flex-flow: row;
    align-items: center;

    .sku-item {
      display: inline-block;
      margin-right: 10px;
    }

    .sku-list__icon {
      font-size: 20px;
    }
  }

  .cursor {
    cursor: pointer;
  }

  .sku-list__body {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
  }
}

.popover-select {
  width: 100% !important;
}

.sku-item__upload {
  margin-top: 6px;
  padding: 4px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  margin-bottom: 10px;

  .arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: -8px;
    left: 10%;
    border-style: solid;
    border-color: transparent;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #333;

    &::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      top: 0;
      margin-left: -10px;
      border-color: transparent transparent #fff;
      border-style: solid;
      border-width: 0 10px 10px;
      content: "";
    }
  }

  .el-image,
  .img-uploader,
  .uploader-icon {
    width: 84px;
    height: 84px;
  }

  .uploader-icon {
    line-height: 84px;
    font-size: 30px;
  }

  .el-image {
    display: block;
  }
}
</style>
